<template>
  <contents :heightInclude="['tabBar', 'navBar']" class="vin_page">
    <u-navbar is-fixed>
      <view class="search_wrap" @click.stop="shouList = true">
        <u-search
          focus
          shape="square"
          placeholder="输入17位VIN码（车架号）"
          v-model="form.vinCode"
          @custom="getData()"
          :action-style="{
            height: '60rpx',
            lineHeight: '60rpx'
          }"
          :action-text="$t('locales.search')"
          @blur="searchBlur"
        ></u-search>
      </view>
    </u-navbar>
    <view class="examples" @click="copyStr">
      <text>示例VIN底盘号：</text>
      <text>LGAX5D656J3020499</text>
      <text class="copy">复制</text>
    </view>
    <view class="vin_info" v-if="vinInfo.vinCode">
      <view class="title">为您查询到以下结果：</view>
      <u-cell-group>
        <u-cell-item
          :arrow="false"
          title="VIN"
          :value="vinInfo.vinCode"
        ></u-cell-item>
        <u-cell-item
          :arrow="false"
          title="车辆品牌"
          :value="vinInfo.brand"
        ></u-cell-item>
        <u-cell-item
          :arrow="false"
          title="生产年份"
          :value="vinInfo.year"
        ></u-cell-item>
      </u-cell-group>
    </view>
    <SubmitBtn v-if="vinInfo.vinCode" text="搜索配件" @click="navSwitch('/pages/index/vin/search?id=' + vinInfo.carGoodsStandardIds)" />
  </contents>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import { copy } from '@/util'
import { getByVinCode } from '@/api/http/vin'
export default {
  components: {
    SubmitBtn
  },
  data() {
    return {
      form: {
        vinCode: ''
      },
      vinInfo: {}
    }
  },
  methods: {
    getData() {
      if (this.form.vinCode === '') {
        uni.showToast({
          icon: 'none',
          title: '请输入vin码'
        })
        return
      }
      getByVinCode({
        ...this.form
      }).then((res) => {
        if (res.code === 200) {
          this.vinInfo = res.data || {}
        } else {
          this.vinInfo = {}
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    copyStr() {
      copy(this, 'LGAX5D656J3020499')
    },
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },
    searchBlur(val) {
      this.form.vinCode = val.replace(/\s+/g,"")
    }
  }
}
</script>
<style lang="scss" scoped>
.vin_page {
  .search_wrap {
    width: 100%;
  }
  .examples {
    line-height: 60rpx;
    padding: 0 30rpx;
    font-size: 20rpx;
    background-color: #fff;
    color: #999;
    .copy {
      color: $theme-color;
      float: right;
    }
  }
  .vin_info {
    .title {
      line-height: 60rpx;
      padding: 0 30rpx;
      font-size: 20rpx;
      color: rgb(255, 127, 58);
    }
  }
}
</style>